<template>
    <cl-popover placement="bottom" v-model="show" width="470" trigger="click" :disable-document-click="disableDocumentClick">
        <div class="cl-filter">
            <slot></slot>
            <el-collapse-transition>
                <div v-show="showMore">
                    <slot name="more"></slot>
                </div>
            </el-collapse-transition>

            <div class="more" @click="showMore = !showMore" v-if="$slots.more">
                <span>{{ showMore ? '收起' : '更多' }}条件</span><img :class="{ down: showMore }" src="../assets/image/more.png" alt="">
            </div>
        </div>
        <div class="actions">
            <slot name="actions">
                <cl-button size="big" @click="clear">{{ clearText || '清空已选' }}</cl-button>
                <cl-button pattern="primary" size="big" @click="filter">{{ filterText || '筛选' }}</cl-button>
            </slot>
        </div>
        <template slot="reference">
            <slot name="reference" v-bind:show="show"><cl-button type="filter" :focus="show" /></slot>
        </template>
    </cl-popover>
</template>

<script>
export default {
    name: 'ClFilter',
    props: {
        clearText: String,
        filterText: String,
        disableDocumentClick: Boolean
    },
    data() {
        return {
            show: false,
            showMore: false
        }
    },
    methods: {
        clear() {
            this.$emit('clear')
        },
        filter() {
            this.$emit('filter')
        }
    }
}
</script>

<style lang="less" scoped>
    @import "../assets/css/variable/variable.less";

    .cl-button {
        margin-left: 0;
    }

    .cl-button + .cl-button {
        margin-left: 20px;
    }

    .cl-filter {
        padding: 12px;
        max-height: 500px;
        overflow-y: auto;
    }

    .more {
        display: flex;
        align-items: center;

        color: @primaryColor;
        cursor: pointer;

        margin-top: 16px;

        img {
            width: 12px;
            height: 12px;
            margin-left: 3px;
        }

        .down {
            transform: rotate(180deg);
        }
    }

    .actions {
        display: flex;
        align-items: center;
        justify-content: center;

        padding-bottom: 30px;
        padding-top: 16px;
    }
</style>
